<template>
  <div class="search-wall mt-2 d-flex flex-column align-items-center justify-content-center ">
    <div class="input-group w-75">
      <input type="text" class="form-control" v-model="word" placeholder="搜索">
      <button class="input-group-append btn btn-info" @click="search(1)">
        search
      </button>
    </div>
    <div class="searchResult w-100">
      <ul class="list-group list-group-flush d-flex align-items-center ">
          <li class="list-group-item tec-blog w-100"  style="cursor:pointer" v-for="(item) in list" :key="item.articleId" @click="toDetail(item)">
              <h5 class="card-title  text-truncate">{{item.atitle}}</h5>
              <div class="row no-gutters">
                  <div class="col-lg-2 col-4">
                      <img :src="item.img||'https://www.yangqq.com/d/file/news/s/2020-04-02/b06f0385e0e4226794339fdd31419036.jpg'" class="card-img img-fluid w-100" alt="...">
                  </div>
                  <div class="col-7 ">
                      <div class="card-body  pt-0 pt-lg-2 d-flex flex-column justify-content-between h-100">
                          <p class="card-text tec-text text-muted " v-html="item.acontent"></p>
                          <div class="d-none d-lg-block text-black-50">
                              <span href="#" class="card-link"><i class="iconfont icon-yonghu "></i>{{item.auid||'mm'}}</span>
                              <span href="#" class="card-link"><i class="iconfont icon-dianzan "></i>{{item.prizeCount||0}}</span>
                              <span href="#" class="card-link"><i class="iconfont icon-chakan "></i>{{item.readNum||0}}</span>
                              <span href="#" class="card-link"><i class="iconfont icon-pinglun"></i>{{item.commentCount||0}}</span>
                              <span class="card-link d-lg-inline d-none">{{item.atime}}</span>
                          </div>
                      </div>

                  </div>
              </div>
              <div class="d-block d-lg-none text-black-50">
                              <span href="#" class="card-link"><i class="iconfont icon-dianzan "></i>{{item.prizeCount}}</span>
                              <span href="#" class="card-link"><i class="iconfont icon-chakan "></i>{{item.readNum}}</span>
                              <span href="#" class="card-link"><i class="iconfont icon-pinglun"></i>{{item.commentCount}}</span>
                              <span class="card-link ">{{item.atime}}</span>
                      </div>
           </li>
      </ul>
      <turnPage  @getNewData='search' :pageCount='pageShow' :articleNum='num'></turnPage>
    </div>
    <div class="search-none" v-if="list.length==0">
      <div> 无敌是多么寂寞，尝试一下别的</div>
      <div class="card col-12 col-lg-12   relate-read"  v-for="(item,index) in other"  :key="index">
        <div class="card-body">
            <h4 class="card-title" @click="toOther(item)"><a  class="title-link text-body font-weight-bold">{{item.atitle}}</a></h4>
            <p class="card-text">{{item.acontent}}</p>

            <span href="#" class="card-link">作者：<span>{{item.auid}}</span> </span>
            <a href="#" class="card-link">点赞({{$util.changeNum(item.prizeCount)||0}})</a>
            <a href="#" class="card-link">评论({{$util.changeNum(item.commentCount)||0}})</a>
            <a href="#" class="card-link">热度({{$util.changeNum(item.readNum)||0}})</a>
             <span class="card-link d-lg-inline d-none">发布时间:{{$moment(item.atime).format(('YYYY-MM-DD hh:mm:ss'))}}</span>



        </div>
      </div>
    </div>
  </div>
</template>

<script>
  import turnPage from '../../util/turnPage.vue'
  export default {
    data(){
      return {
        word:'',
        pageShow:0,
        num:0,
        list:[],
        other:[]//没有东西时
      }
    },
    components:{
      turnPage,
    },
    methods:{
      getOther(){

          this.$axios.get(this.$url+'getOtherArticle?key=-1')
          .then(data=>{
              this.other = data.data.data;

          })
      },
      //到具体内容
      toDetail(item){
           this.$router.push('/homePage/readArticle?id='+item.articleId);
           localStorage.setItem("tecArticle",JSON.stringify(item));
       },
      //获取数量
      getPageNo(){
        this.$axios.get(this.$url+"getSearchPage?word="+this.word).then(res=>{
            let tmp = res.data.data[0]['count(articleId)'];

             this.pageShow = Math.ceil(tmp/10);
              this.num = tmp;

        })
      },
      search(page){
        this.getPageNo();
       this.$axios.get(this.$url+"searchDynamic?word="+this.word+"&pageNo="+page||1).then(res=>{

             let tmp = res.data.data;
             tmp.forEach(element => {
                 element.atime = this.$moment(element.atime).format(('YYYY-MM-DD hh:mm:ss'));
                 // 匹配关键字正则
                let replaceReg = new RegExp(this.word, 'g');
                // 高亮替换v-html值
                let replaceString = '<span class="text-danger">' + this.word + '</span>';
                // 开始替换
                 element.acontent = element.acontent.replace(replaceReg, replaceString);

             });

             this.list = tmp;

       })
      }
    },
    created() {
      this.word = this.$router.word;
      if(this.word){
        this.search()
      }

    }
  }
</script>

<style scoped="scoped" lang="less">
  .search-wall{

  }
  .tec-text{
      max-height:76px;       /*首先设置div高度*/

      overflow:hidden;           /*设置超出部分隐藏*/

      text-overflow:ellipsis;    /*然后设置文本隐藏方式*/

      /*为了实现多行文本也有效果要设置如下3个属性，具体属性的含义我还不是很清楚：*/

      display:-webkit-box;

      -webkit-line-clamp:3;    /*只显示3行，如果不设置这个属性，会出现文本被拦腰截断的现象*/

      -webkit-box-orient: vertical;
  }
  .file-title{
           overflow: hidden;  //超出隐藏
      text-overflow: ellipsis;//省略号
      white-space: nowrap;//不换行
      }
</style>
